<template>
  <div class="calendar">
    <div class="header">
      <img
        src="https://img.wilmer.com.cn/admin/2024/4-30/zuo.png"
        alt
        @click="prevMonth"
      />
      <span>{{ currentYear }}年 {{ currentMonth }}月 {{ currentDay }}日</span>
      <img
        src="https://img.wilmer.com.cn/admin/2024/4-30/you.png"
        alt
        @click="nextMonth"
      />
    </div>
    <div class="transverseLine"></div>
    <table>
      <thead>
        <tr>
          <th v-for="day in daysOfWeek" :key="day">{{ day }}</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(week, index) in calendar" :key="index">
          <td
            v-for="day in week"
            :key="day.date"
            :class="day.class"
            @click="selectDate(day)"
          >
            <span>{{ day.date }}</span>
            <div class="event-dots" v-if="day.events">
              <div v-for="event in day.events" :key="event" class="dot"></div>
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [],
      required: false,
    },
  },
  data() {
    return {
      currentYear: new Date().getFullYear(),
      currentMonth: new Date().getMonth() + 1,
      currentDay: new Date().getDate(),
      daysOfWeek: ["日", "一", "二", "三", "四", "五", "六"],
      selectedDate: null,
    };
  },
  computed: {
    calendar() {
      const firstDayOfMonth = new Date(
        this.currentYear,
        this.currentMonth - 1,
        1
      ).getDay();
      const daysInMonth = new Date(
        this.currentYear,
        this.currentMonth,
        0
      ).getDate();
      const daysInPrevMonth = new Date(
        this.currentYear,
        this.currentMonth - 1,
        0
      ).getDate();
      let date = 1;
      const calendar = [];
      const daysBefore = (firstDayOfMonth + 6) % 7;

      // 筛选当钱月份的数据
      console.log(this.list);
      let arr  = []
      for (let index = 0; index < this.list.length; index++) {
        
        
      }

      for (let i = 0; i < 6; i++) {
        const week = [];
        for (let j = 0; j < 7; j++) {
          if (i === 0 && j < daysBefore) {
            week.push({
              date: daysInPrevMonth - (daysBefore - j - 1),
              month: this.currentMonth - 1,
              class: "prev-month",
            });
          } else if (date > daysInMonth) {
            week.push({
              date: date - daysInMonth,
              month: this.currentMonth + 1,
              class: "next-month",
            });
            date++;
          } else {
            week.push({
              date: date,
              class: "current-month",
              month: this.currentMonth,
              events:
                date === 8 || date === 9 || date === 10 || date === 23
                  ? ["event1", "event2"]
                  : null,
            });
            date++;
          }
        }
        calendar.push(week);
        if (date > daysInMonth) {
          break;
        }
      }
      return calendar;
    },
  },
  methods: {
    prevMonth() {
      if (this.currentMonth === 1) {
        this.currentYear--;
        this.currentMonth = 12;
      } else {
        this.currentMonth--;
      }
    },
    nextMonth() {
      if (this.currentMonth === 12) {
        this.currentYear++;
        this.currentMonth = 1;
      } else {
        this.currentMonth++;
      }
    },
    selectDate(day) {
      if (day.class === "current-month") {
        this.selectedDate = day.date;
      }
    },
  },
};
</script>

<style scoped>
.calendar {
  padding: 0;
  font-family: Arial, sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.header img {
  width: 12px;
  height: 20px;
  cursor: pointer;
}

.header span {
  color: #333333;
  font-family: PingFang SC;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4%;
}

.transverseLine {
  margin: 25px auto;
  width: calc(100% - 20px);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

table {
  width: 100%;
  border-collapse: collapse;
}

th,
td {
  padding: 10px;
  text-align: center;
}

th {
  color: #ffb169;
  font-family: PingFang SC;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.4;
}

td {
  height: 52px;
  cursor: pointer;
  position: relative;
}

td span {
  display: inline-block;
  width: 100%;
}

td.prev-month span,
td.next-month span {
  color: #999;
}

td.current-month span {
  color: #000;
}

.event-dots {
  display: flex;
  justify-content: center;
  margin-top: 5px;
}

.dot {
  width: 5px;
  height: 5px;
  background-color: red;
  border-radius: 50%;
  margin: 0 1px;
}

td.selected span {
  background-color: lightblue;
  border-radius: 50%;
  padding: 5px;
}
</style>
